<template>
  <div id="index">
    <el-row :gutter="270" v-for="(row, rowIndex) in data" :key="rowIndex">
      <el-col
        :xs="8"
        :sm="6"
        :md="4"
        :lg="3"
        :xl="1"
        v-for="(item, colIndex) in row"
        :key="colIndex"
      >
      <!-- 这里重新给他们起名字-------------------------------------------------------------------------- -->
        <router-view @changeid="changIDFN(item.goods_id)" :title_name="item.goods_name" :good_id="item.goods_id" :goodImg="item.goods_big_logo" :price="item.goods_price"  :goodStu="item.goods_stu"></router-view>
      </el-col>
    </el-row>
    <ContentDetails ref="showContentDetailsPage" :spid="good_id"><!-- 商品详情页面 --></ContentDetails>
  </div>
</template>
  
<script>
import ContentDetails from "./ContentDetails.vue";
export default {
  name: "WorkspaceJsonGoodsView",

  data() {
    return {
      good_id: 0,
      PageGnumber: 40,
      // 商品数量
      rownumber: 5,
      params: { params: { pagenum: 1, pagesize: 20 } },
      // 单行数量
      data: []
    };
  },

  computed: {
    dataRows() {
      const rows = [];
      for (let i = 0; i < this.data.length; i += this.rownumber) {
        rows.push(this.data.slice(i, i + this.rownumber));
        console.log(rows)
      }
    }
  },

  created() {
    
  },
  mounted() {
    this.forGoodsitem();
    this.getGoodsList()
  },

  methods: {
    async getGoodsList(){ 
      let res = await this.$http.get("goods", this.params);
      console.log(res)
      console.log('商品列表');
      console.log(res);
      // 判断meta属性是否定义 | res == 'undefined' 则是未定义
      if(res == 'undefined'){
        this.$message.error('meta属性未定义');
        return false;
      }
      if(res.meta.status != '200'){
        this.$message.error('获取商品数据失败!!!');
        return false;
        //
      }
      
      // console.log(this.data)
      console.log(res.data.goods)
      for (let i = 0; i < res.data.goods.length; i += this.rownumber) {
        console.log(i)
        this.data.push(res.data.goods.slice(i, i + this.rownumber));
        // rows.push(this.data.slice(i, i + this.rownumber));
      }
      // return rata.data.goods
    },

    // 显示详情页面
    showDetailsPage(){
      this.$refs.showContentDetailsPage.showNowPage();
      this.$refs.showContentDetailsPage.toDetails(this.good_id); // 使用方法传参
      // 此处省略百行代码🤪🤪🤪....
    },
    // 🪨(该方法只为子组件服务)父组件的方法 [ 将会被子组件调用 ]🪨🪨🪨
    changIDFN(id){
      this.good_id = id; // 将拿到的值赋值给 good_id
      this.showDetailsPage(); // 显示商品详情页面
      console.log(`成功接收到子组件的数据: ${id}`);
      // 此处省略百行代码🤪🤪🤪...
    },
    forGoodsitem() {
      // 在这里添加你的逻辑代码...
    }
  },
  components: {
    // 注册商品内容详情组件
    ContentDetails
  }
};
</script>
<style scoped>
  .el-row{
    margin-top: 20px;
  }
</style>